
<template>
  <div class="register">
    <div class="clear-fix title">
      <router-link :to="{name:'login',query:{pid:$route.query.pid,aid:$route.query.aid}}" replace>
        <span class="float-r f-18">登入</span>
      </router-link>
    </div>
    <div class="welcome f-bold mt-42">注册</div>
    <div class="line mt-14"></div>
    <cube-input class="mobile" v-model="mobile" placeholder="手机号" clearable autofocus></cube-input>
    <cube-validator ref="mobile" v-model="valid[0]" :model="mobile" :rules="rules"></cube-validator>
    <div class="vcode flex aligin-center">
      <cube-input class="vcode-input" v-model="vcode" placeholder="手机号验证码" clearable autofocus></cube-input>
      <span
        class="timer"
        @click="sendVcode"
      >{{((typeof this.vcodeCount)==="string")?vcodeCount:vcodeCount+'s'}}</span>
    </div>
    <cube-validator ref="vcode" v-model="valid[1]" :model="vcode" :rules="vcodeRules"></cube-validator>
    <cube-input class="user" v-model="user" placeholder="输入用户名" clearable></cube-input>
    <cube-validator ref="user" v-model="valid[2]" :model="user" :rules="userRules"></cube-validator>
    <cube-input
      class="password"
      v-model="password"
      placeholder="输入密码"
      type="password"
      clearable
      :eye="{open:false}"
    ></cube-input>
    <cube-validator ref="password" v-model="valid[3]" :model="password" :rules="passwordRules"></cube-validator>
    <cube-input
      class="password"
      v-model="rPassword"
      placeholder="再次输入密码"
      type="password"
      clearable
      :eye="{open:false}"
    ></cube-input>
    <cube-validator ref="rPassword" v-model="valid[4]" :model="rPassword" :rules="passwordRules"></cube-validator>
    <cube-input class="aid" v-if="$route.query.aid" v-model="c_aid" placeholder="pid" disabled></cube-input>
    <button class="z-btn color-white f-16" @click="submit">注册</button>
    <div class="check-rule f-14">
      注册即视为同意
      <span class="color-red">《融媒优品协议》</span>
    </div>
  </div>
</template>

<script>
import { Register, getMsgCode } from "../api/api";
import myMixin from "../mixin/md5"
export default {
  mixins:[myMixin],
  components: {},
  data() {
    return {
      key:"",
      iv:"",
      mobile: "", //手机号
      password: "", //密码
      rPassword: "", //确认密码
      user: "", //用户名
      vcode: "", //验证码
      vcodeTimer: null, //验证码计时器
      vcodeCount: "获取验证码",
      valid: [undefined, undefined, undefined, undefined, undefined], //校验结果
      rules: {
        required: true,
        type: "tel"
      },
      vcodeRules: {
        required: true
      },
      passwordRules: {
        required: true
      },
      userRules: {
        required: true
      }
    };
  },
  computed: {
    c_aid(){
      return '代理邀请码: '+(this.$route.query.aid||"")
    }
  },
  watch: {},
  methods: {
    //发送验证码
    sendVcode() {
      if (!(typeof this.vcodeCount === "string")) {
        return;
      }
      const mobile = this.$refs.mobile.validate();
      Promise.all([mobile]).then(() => {
        if (this.valid[0]) {
          this.vcodeCount = 60;
          this.vcodeTimer = setInterval(() => {
            if (this.vcodeCount - 1 < 0) {
              this.vcodeCount = "获取验证码";
              clearInterval(this.vcodeTimer);
              this.vcodeTimer = null;
            } else {
              this.vcodeCount -= 1;
            }
          }, 1000);
          getMsgCode({mobile:this.mobile}).then(({data:{result}})=>{
            this.key=result.key;
            this.iv=result.iv
          })
        } else {
          const toast = this.$createToast({
            txt: "手机号有误",
            type: "error"
          });
          toast.show();
        }
      });
    },
    //提交
    submit() {
      if(!(this.key&&this.iv)){
        this.$toast("请获取验证码")
        return
      }
      const mobile = this.$refs.mobile.validate();
      const password = this.$refs.password.validate();
      const user = this.$refs.user.validate();
      const rPassword = this.$refs.rPassword.validate();
      const vcode = this.$refs.vcode.validate();
      Promise.all([mobile, password, user, rPassword, vcode]).then(() => {
        if (!(this.password === this.rPassword)) {
          const toast = this.$createToast({
            txt: "两次密码不一致",
            type: "error"
          });
          toast.show();
          return;
        }
        if (this.valid.every(item => item)) {
          if(this.password.trim().length<6){
            this.$toast("密码长度不能小于6位")
            return
          }
          let params={
            mobile: this.mobile,
            nick_name: this.user,
            password: this.encrypt(this.password,this.key,this.iv),
            confirm_password: this.encrypt(this.rPassword,this.key,this.iv),
            msgCode: this.vcode,
            device_code:1
          }
          if(parseInt(this.$route.query.pid)){
            params=Object.assign({pid:this.$route.query.pid},params)
          } 
          if(this.$route.query.aid){
            params = Object.assign({}, params, { aid: this.$route.query.aid });
          }
          Register(params).then(res => {
            if(res.data.result.token){
              this.$store.commit("saveToken",res.data.result.token)
               if(parseInt(this.$route.query.pid)){
                 this.$router.replace("/index/home")
              }
              else{
                  this.$router.replace("/index/home")
              }
            }
          });
        }
      });
    }
  },
  created() {},
  mounted() {},
  updated() {}, //生命周期 - 更新之后
  destroyed() {
    clearInterval(this.vcodeTimer);
    this.vcodeTimer = null;
  } //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
@import url("../assets/style/mixin.less"); //引入公共css类

//input激活
.register /deep/ .cube-input {
  box-shadow: 0px 5px 20px 2px rgba(162, 162, 162, 0.19);
}
.register /deep/ .cube-validator-msg-def {
  margin-left: 41px;
}
.register /deep/ .cube-input:after{
  border: none;
}
.register {
  height: 100%;
  .title {
    padding: 15px 33px;
  }
  .welcome {
    margin-left: 41px;
    font-size: 24px;
    line-height: 42px;
  }
  .line {
    margin-left: 50px;
    width: 30px;
    height: 3px;
    background: #ea373f;
  }
  .mobile {
    margin: 14px 41px 0 41px;
    height: 44px;
    font-size: 14px;
  }
  .vcode {
    margin: 4px 41px 0 41px;
    height: 44px;
    font-size: 14px;
    box-shadow: 0px 5px 20px 2px rgba(162, 162, 162, 0.19);
  }
  .vcode-input {
    width: 180px;
    height: 44px;
    box-shadow: none;
  }
  .timer {
    height: 44px;
    line-height: 44px;
    flex: 1;
    text-align: center;
    box-shadow: 0px 5px 20px 2px rgba(162, 162, 162, 0.19);
  }
  .user {
    margin: 4px 41px 0 41px;
    height: 44px;
    font-size: 14px;
  }
  .password {
    margin: 4px 41px 0 41px;
    height: 44px;
    font-size: 14px;
  }
  .aid{
    margin: 4px 41px 0 41px;
    height: 44px;
    font-size: 14px;
    color: #999999;
  }
  .z-btn {
    margin: 30px 41px 0 41px;
    width: calc(100% - 82px);
    height: 44px;
    background: #999999;
  }
  .check-rule {
    margin-top: 14px;
    margin-left: 51px;
  }
  .color-red {
    color: #e9323b;
  }
}
</style>